<form class="layui-form layui-box" style='padding:25px 30px 20px 0' action="{:url()}" data-auto="true" method="post">
    <input type="hidden" name="id" value='{$vo.id|default=""}'>

    <div class="layui-form-item">
        <label class="layui-form-label">体检机构</label>
        <div class="layui-input-block">
            <select name='mec_id' class='layui-select' lay-filter="mec_id" id="mec_id">
                {foreach $mec_list as $key=>$cate}
                <option  value='{$key}' {if isset($vo.mec_id) and ($key == $vo.mec_id)}selected{/if}>{$cate}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">项目分类</label>
        <div class="layui-input-block">
            <select name='item_set_id' class='layui-select' id="item_set_id">
            </select>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="layui-form-item">
        <label class="layui-form-label">项目名称</label>
        <div class="layui-input-block" >
            <input type="text" name="name" value='{$vo.name|default=""}' required="required" title="请输入项目名称" placeholder="请输入项目名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">检查项目</label>
        <div class="layui-input-block">
            <input type="text" name="intro" value='{$vo.intro|default=""}' required="required" title="请输入检查项目" placeholder="请输入检查项目" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">单项价格</label>
        <div class="layui-input-block">
            <input type="text" name="price" value='{$vo.price|default=""}' required="required" title="请输入单项价格" placeholder="请输入单项价格" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">检查目的</label>
        <div class="layui-input-block">
            <textarea name="purpose" placeholder="请输入检查目的" required="required" title="请输入检查目的" class="layui-textarea">{$vo.purpose|default=""}</textarea>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>

<script>
    var itemSetList = JSON.parse('{$item_set_list|raw}');
    var selectIndexM = {$vo.mec_id|default="0"};
    var selectIndexI = {$vo.item_set_id|default="0"};

    function renderForm() {
        layui.use('form', function(){
            var form = layui.form;
            form.render();
        });
    }

    // 初始化
    function initSelect() {
        if (selectIndexM > 0) {
            $("#mec_id").val(selectIndexM);
        }

        var id = $("#mec_id").val();
        initItems(id);

        renderForm();
    }

    function initItems(id) {
        $("#item_set_id").empty();

        $.each(itemSetList[id], function(idx, obj) {
            var selected = false;
            if (obj.id == selectIndexI) {
                selected = true;
            }
            $("#item_set_id").append(new Option(obj.name, obj.id, false, selected));
        });
    }

    (function () {
        layui.use('form', function(){
            var form = layui.form;
            form.render();

            form.on('select(mec_id)', function(data) {
                var id = data.value;
                initItems(id);

                renderForm();
            });

            initSelect();
        });
    })();
</script>
